<template>
  <div class="dg-pagination">
    <i v-if="isLoading" class="fa fa-spinner fa-pulse fa-fw"></i>
    <span>{{locale.pageLabel}}</span>
    <span>{{pageIndex}}/{{totalPage}}</span>
    <button :disabled="isLoading || pageIndex <= 1"
            :class="config.buttonClass"
            :style="config.buttonStyle"
            @click.debounce="gotoFirstPage()">
      {{locale.firstPage}}
    </button>
    <button
      :disabled="isLoading || pageIndex <= 1"
      :class="config.buttonClass"
      :style="config.buttonStyle"
      @click.debounce="gotoPrevPage()">
      {{locale.prevPage}}
    </button>
    <span>{{locale.gotoPage}}</span>
    <input :disabled="isLoading" type="number" @change="gotoPage" :value="pageIndex">
    <button
      :disabled="isLoading || pageIndex >= totalPage"
      :class="config.buttonClass"
      :style="config.buttonStyle"
      @click.debounce="gotoNextPage()">
      {{locale.nextPage}}
    </button>
    <button :disabled="isLoading || pageIndex >= totalPage"
            :class="config.buttonClass"
            :style="config.buttonStyle"
            @click.debounce="gotoLastPage()">
      {{locale.lastPage}}
    </button>
    <span>{{locale.pageSize}}</span>
    <select :disabled="isLoading" @change="pageSizeChange">
      <option v-for="item in pageSizeList"
              :value="item"
              :selected="pageSize === item">
        {{item}}
      </option>
    </select>
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    props: {
      config: {
        type: Object,
        default () {
          return {}
        }
      },
      isLoading: {}
    },
    computed: {
      locale () {
        return this.config.locale || {}
      },
      totalPage () {
        return Math.ceil(this.totalCount / this.pageSize) || 1
      }
    },
    mounted () {
      this.pageIndex = this.config.pageIndex || 1
      this.pageSize = this.config.pageSize || 10
      this.pageSizeList = this.config.pageSizeList || [10, 20, 50, 100]
      this.$nextTick(() => {
        if (!this.config.buttonClass && !this.config.buttonStyle) {
          this.config.buttonClass = 'btn btn-xs btn-primary'
        }
        if (!this.config.wrapperClass && !this.config.wrapperStyle) {
          this.config.wrapperStyle = 'display: block; text-align: right;'
        }
      })
    },
    data () {
      return {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        pageSizeList: []
      }
    },
    methods: {
      gotoPage (e) {
        let newPageIndex = +e.target.value
        if (newPageIndex === this.pageIndex) {
          return
        }
        if (newPageIndex > 0 && newPageIndex <= this.totalPage) {
          newPageIndex = Math.floor(newPageIndex)
          e.target.value = newPageIndex
          if (newPageIndex === this.pageIndex) {
            return
          }
          this.pageIndex = newPageIndex
          this.loadData()
        } else {
          e.target.value = this.pageIndex
        }
      },
      gotoFirstPage () {
        this.pageIndex = 1
        this.loadData()
      },
      gotoPrevPage () {
        if (this.pageIndex > 1) {
          this.pageIndex -= 1
          this.loadData()
        }
      },
      gotoNextPage () {
        if (this.pageIndex < this.totalPage) {
          this.pageIndex += 1
          this.loadData()
        }
      },
      gotoLastPage () {
        if (this.pageIndex !== this.totalPage) {
          this.pageIndex = this.totalPage
          this.loadData()
        }
      },
      pageSizeChange (e) {
        let val = +e.target.value
        if (_.isNaN(val)) {
          val = this.pageSizeList[0]
        }
        if (val !== this.pageSize) {
          this.pageSize = val
          this.reload()
        }
      },
      reload () {
        if (this.isLoading) {
          return
        }
        this.pageIndex = 1
      },
      loadData () {
        if (this.isLoading) {
          return
        }
        this.$emit('start-load-data', this.pageIndex, this.pageSize)
      },
      loadComplete (totalCount) {
        this.totalCount = totalCount
      }
    }
  }
</script>

<style lang="scss">
  .dg-pagination {
    border-top: solid 1px #DDD;
    padding: 4px 10px;
    text-align: right;

    input {
      width: 52px;
      padding: 0 4px;
    }
    input, select {
      &[disabled] {
        cursor: not-allowed
      }
    }
  }
</style>
